<template>
    <div>
      <el-dialog v-model="dialogTableVisible" title="工单详情" width="70%">
          <el-form label-width="150px" :model="formData" size="small">
            <el-row :gutter="20">
              <el-col :span="12" v-for="(group, index) in formGroups" :key="index">
                <el-form-item v-for="item in group" :key="item.prop" :label="item.label" >
                  <el-input 
                    v-model="formData[item.prop]" 
                    :type="item.type || 'text'" 
                    :rows="item.rows || 1" 
                    :width="item.width || 100" 
                    readonly 
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        <template #footer>
          <el-button @click="dialogTableVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>

  import { ref, onMounted,reactive,defineExpose,defineProps } from 'vue'
 
 const props = defineProps({
parentData: {
type: [String, Number, Object], // 依据实际情况设定类型
default: null
},
saveSubmit: {
type: Function,
default: () => {
  return Function
}
}
})

  const dialogTableVisible = ref(false)
  const formData = ref(''
    // appealTime: '', applicant: '', businessContactPhone: '', businessSubclass: '', businessTags: '',
    // businessType: '', callContent: '', currentStage: '', electricityCategory: '',
    // escalationFlag: '', evaluationContent: '', handlingSuggestions: '', id: '',
    // incomingNum: '', informationSources: '', isTracking: '', labelCreateType: '',
    // labelName: '', lineName: '',  numberReplies: '', operator: '', operatorTime: '', opinionsMunicipalUpgrading: '',
    // powerBureau: '', powerStation: '', powerUnit: '',
    // processingStatus: '', processingTime: '', seatSuggestions: '', serviceChannels: '', towerAreaName: '',userAddr:'',
    // userId:'',userName:'',workCode:''
  )
  // 表单字段分组配置
  const formGroups = [
    [
      { label: '工作单编号', prop: 'workCode' },
      { label: '用户编号', prop: 'userId' },
      { label: '用户地址', prop: 'userAddr' },
      { label: '来电内容', prop: 'callContent', type: 'textarea', rows: 5 },
      { label: '来电号码', prop: 'incomingNum' },
      { label: '业务子类', prop: 'businessSubclass' },
      { label: '供电单位', prop: 'powerUnit' },
      { label: '供电所', prop: 'powerStation' },
      { label: '线路名称', prop: 'lineName' },
      { label: '处理意见', prop: 'handlingSuggestions', type: 'textarea', rows: 4,},
      { label: '当前环节', prop: 'currentStage' },
      { label: '业务标签', prop: 'businessTags' },
      { label: '处理状态', prop: 'processingStatus' },
      { label: '工单回复次数', prop: 'numberReplies' },
      { label: '评议内容', prop: 'evaluationContent', type: 'textarea', rows: 2 },
      { label: '摘要内容', prop: 'appealContent', type: 'textarea', rows: 2 },
    ],
    [
    { label: '诉求人', prop: 'applicant' },
    { label: '用户名称', prop: 'userName' },
    { label: '业务类型', prop: 'businessType' },
    { label: '诉求时间', prop: 'appealTime' },
    { label: '供电局', prop: 'powerBureau' },
    { label: '用电类别', prop: 'electricityCategory' },
    { label: '台区名称', prop: 'towerAreaName' },
    { label: '市提级意见', prop: 'opinionsMunicipalUpgrading', type: 'textarea', rows: 4 },
    { label: '归档时间', prop: 'archiveTime' },
    { label: '业务联系手机', prop: 'businessContactPhone' },
    { label: '服务渠道', prop: 'serviceChannels' },
    { label: '信息来源', prop: 'informationSources' },
    { label: '回复信息', prop: 'replyMessage', type: 'textarea', rows: 4 },
    { label: '标签名称', prop: 'labelName' },
    { label: '创建类型', prop: 'labelCreateType' },
    { label: '是否申请后续跟踪', prop: 'isTracking' },
    ],
    
  ]
  
  const openModal = (row) => {
    formData.value=row
    // fetchWorkOrderData()
    dialogTableVisible.value = true
  }
  defineExpose({
 openModal
})
//   const fetchWorkOrderData = () => {
//     // 模拟数据加载
//     Object.assign(formData, {
//       workOrderNo: 'WO-2023-12345',
//       userAddress: '北京市朝阳区建国路88号',
//       callContent: '用户反馈停电问题，已经持续2小时',
//       callNumber: '13800138000',
//       // ... 其余模拟数据保持不变
//     })
//   }
  </script>
      
